<template>

	<!-- <scroll-view class="scroll-area" scroll-y> -->
	<view class="container">
		<view class="chart-item">
			<text class="title-text">历史耗电</text>
			<l-echart ref="chartRef"></l-echart>
		</view>

		<view class="chart-item" style="margin-top: 25rpx;">
			<view class="chart-top">
				<text class="title-text">昨日耗电</text>
				<text class="time-text">{{ proxy.dayjs().subtract(1, 'day').format('YYYY-MM-DD')}}</text>
			</view>

			<view class="info-title">
				<text class="info-title-text" style="width:297rpx;">项目</text>
				<text class="info-title-text" style="width:223rpx;">昨日数据</text>
				<text class="info-title-text" style="width:150rpx;">变化值</text>
			</view>

			<view class="info-data">
				<view class="info-data-item" v-for="(item,index) in dataInfo" :key="index" @tap="toDetail(item.name)">
					<text class="info-data-text" style="width:297rpx;">{{item?.name}}</text>
					<text class="info-data-text" style="width:223rpx;">{{item?.value}}</text>
					<text class="info-data-text" style="width:150rpx;">{{getChangeAbs(item?.rate)}}</text>
					<image :src="getChangeImg(item?.rate)" mode="aspectFill" class="info-data-change-img"></image>
				</view>
			</view>
		</view>
		<text class="list-footer">以上数据统计时间节点为每日00:00——第二日00:00</text>
	</view>
	<!-- </scroll-view> -->
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted, defineProps, getCurrentInstance } from 'vue';
	import * as energy from "@/api/energy.ts";

	const { proxy } = getCurrentInstance();

	const props = defineProps<{
		keys : string | undefined
	}>()

	const echarts = require('../../uni_modules/lime-echart/static/echarts.min');
	const chartRef = ref(null);
	const myChart = ref(null);
	const xData = ref([]);
	const yBarData = ref([]);
	const unit = ref()
	const option = reactive({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				//阴影指示器
				type: 'shadow'
			},
			confine: true
		},
		legend: {
			top: 10,
			left: "center",
			itemWidth: 10,
			itemHeight: 5,
			data: ['耗电'],
		},
		grid: {
			top: 40,
			left: 10,
			right: 10,
			bottom: 20,
			containLabel: true,
		},
		xAxis: [
			{
				type: 'category',
				data: xData.value,
			}
		],
		yAxis: [
			{
				// 数值轴，适用于连续数据。
				type: 'value',
			}

		],
		series: [
			{
				name: '耗电',
				type: 'bar',
				barWidth: 10,
				tooltip: {
					valueFormatter: function (value) {
						return value;
					},
				},
				itemStyle: {
					color: "#BCCAFA",
					borderColor: "#5F83F9",
					borderWidth: 1,
				},
				data: yBarData.value,
				emptyDataMessage: '暂无数据',
			},
		]
	});

	const dataInfo = ref([])

	onMounted(() => {
		getGarherInfo()
	})

	const getGarherInfo = async () => {

		//统计图
		const gartherResult = await energy.getGarther({ "type": 0, "keys": props.keys, "format": energy.FormatType.day, "oper": energy.OperType.sum, "startTime": proxy.dayjs().subtract(15, 'day').format('YYYY-MM-DD'), "endTime": proxy.dayjs().format('YYYY-MM-DD') });
		switch (props.keys) {
			case energy.GartherType.xmznh:
				option.legend.data = ['项目总能耗'];
				option.series[0].name = '项目总能耗';
				option.series[0].tooltip = {
					valueFormatter: function (value) {
						return `${value}kw.h`;
					},
				}
				gartherResult.data.pw.forEach(item => {
					xData.value.push(proxy.dayjs(item.time).format('MM-DD'));
					yBarData.value.push(item.value);
				})
				break
			case energy.GartherType.dwpfmhd:
				option.legend.data = ['单位平方米耗电'];
				option.series[0].name = '单位平方米耗电';
				option.series[0].tooltip = {
					valueFormatter: function (value) {
						return `${value}kw.h/㎡`;
					},
				}
				gartherResult.data.ap.forEach(item => {
					xData.value.push(proxy.dayjs(item.time).format('MM-DD'));
					yBarData.value.push(item.value);
				})
				break
			case energy.GartherType.dwpfmdf:
				option.legend.data = ['单位平方米电费'];
				option.series[0].name = '单位平方米电费';
				option.series[0].tooltip = {
					valueFormatter: function (value) {
						return `${value}元/㎡`;
					},
				}
				gartherResult.data.pr.forEach(item => {
					xData.value.push(proxy.dayjs(item.time).format('MM-DD'));
					yBarData.value.push(item.value);
				})
				break
		}

		initChart()

		//昨日耗电
		const paramResult = await energy.getPWCRaking({ "type": 0, "keys": props.keys, "format": 0, "oper": 1, "startTime": proxy.dayjs().subtract(1, 'day').format('YYYY-MM-DD'), "endTime": proxy.dayjs().format('YYYY-MM-DD') });
		dataInfo.value.push(...paramResult.data)
	}

	const initChart = async () => {
		if (!chartRef.value) return
		const chart = await chartRef.value.init(echarts)
		chart.setOption(option)
		myChart.value = chart
	}

	const getChangeAbs = (change : number) : number => {
		return formatDecimal(Math.abs(change));
	}

	const getChangeImg = (change : number) : string => {
		if (change > 0) {
			return "/static/energy_up.png";
		} else if (change < 0) {
			return "/static/energy_down.png";
		} else {
			return "";
		}
	}

	const toDetail = (name) => {
		uni.navigateTo({ url: `/pages/energy/detail?projectName=${name}` })
	}
	
	function formatDecimal(num) {
	  return parseFloat(num.toFixed(2));
	}
</script>

<style lang="scss" scoped>
	.scroll-area {
		height: 80vh;
	}

	.container {
		display: flex;
		flex-direction: column;
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-bottom: 40rpx;

		.chart-item {
			display: flex;
			flex-direction: column;
			min-height: 440rpx;
			border-radius: 10px;
			background-color: #FAFAFC;
			border: 2px solid #FFFFFF;
			box-shadow: 0px 10px 10px 0px rgba(135, 166, 233, 0.1);
		}

		.chart-top {
			display: flex;
			flex-direction: row;
			align-items: baseline;
			justify-content: space-between;
		}

		.title-text {
			margin-top: 20rpx;
			margin-left: 25rpx;
			color: #333333;
			font-weight: 600;
			font-size: 28rpx;
		}

		.time-text {
			color: #999999;
			font-weight: 700;
			font-size: 26rpx;
			margin-right: 25rpx;
		}

		.info-title {
			display: flex;
			flex-direction: row;
			border-radius: 5px;
			background-color: #EFF1F7;
			padding-top: 15rpx;
			padding-bottom: 15rpx;
			padding-left: 20rpx;
			padding-right: 60rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;
			justify-content: start;

			.info-title-text {
				color: #333333;
				font-weight: 400;
				font-size: 25rpx;
				text-align: left;
			}
		}

		.info-data {
			display: flex;
			flex-direction: column;

			.info-data-item {
				display: flex;
				flex-direction: row;
				padding-top: 15rpx;
				padding-bottom: 15rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				margin-left: 20rpx;
				margin-right: 20rpx;
				justify-content: start;


				.info-data-text {
					color: #333333;
					font-weight: 500;
					font-size: 25rpx;
					text-align: left;
				}

				.info-data-change-img {
					width: 40rpx;
					height: 30rpx;
				}
			}
		}

		.list-footer {
			color: #9FA5B6;
			font-weight: 400;
			font-size: 22rpx;
			width: 100%;
			text-align: center;
			margin-top: 20rpx;
		}
	}
</style>